<template>
	<view class="content">
		
		<view class="tab">
			<view><image @click="goMenu" src="../../static/icon/菜单-实色.png"></image><text class="cur">{{questionId}}</text><text>/{{cnt}}</text></view>
		</view>
		
		<view class="box">
			<view><text class="no" v-model="questionNum">第{{questionNum}}题---</text><text class="type">{{qtype}}</text></view>
			<view class="que">
				{{content}}
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[0]" :data-index="1" :src="isRight[questionNum]==1&&selectedIndex[questionNum]==1 ? '../../static/icon/ava_tick.png' : isRight[questionNum]==0&&selectedIndex[questionNum]==1?'../../static/icon/ava_error.png' :'../../static/icon/A_round_字母a_by_climei.png'"></image><text v-model="opt1">{{opt1}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[1]" :data-index="2" :src="isRight[questionNum]==1&&selectedIndex[questionNum]==2 ? '../../static/icon/ava_tick.png' : isRight[questionNum]==0&&selectedIndex[questionNum]==2?'../../static/icon/ava_error.png' :'../../static/icon/B_round_字母b.png'"></image><text v-model="opt2">{{opt2}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[2]" :data-index="3" :src="isRight[questionNum]==1&&selectedIndex[questionNum]==3 ? '../../static/icon/ava_tick.png' : isRight[questionNum]==0&&selectedIndex[questionNum]==3?'../../static/icon/ava_error.png' :'../../static/icon/C_round_字母c.png'"></image><text v-model="opt3">{{opt3}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[3]" :data-index="4" :src="isRight[questionNum]==1&&selectedIndex[questionNum]==4 ? '../../static/icon/ava_tick.png' : isRight[questionNum]==0&&selectedIndex[questionNum]==4?'../../static/icon/ava_error.png' :'../../static/icon/D_round_字母d.png'"></image><text v-model="opt4">{{opt4}}</text>
			</view>
		</view>
		<view class="page">
			<image @click="prevPg" :data-curpg="questionNum" src="../../static/icon/上一页.png"></image>
			<image @click="nextPg" :data-curpg="questionNum" src="../../static/icon/下一页.png"></image>
		</view>
		
		<view class="answer">
			<view>
				<view>正确答案</view>
				<view style="color: #90A674;">{{answer}}</view>
			</view>
			<view>
				<view>你的答案</view>
				<view style="color: #Ff686A;">{{ownAnswer[questionNum]}}</view>
			</view>
			<view>
				<view>收藏本题</view>
				<view>
					<image src="../../static/icon/爱心.png" @click="collect"> </image>
				</view>
			</view>
		</view>
		
		<view class="analysis">
			<view class="title">试题解析</view>
			<view> {{analysis}}</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRight:[],
				clicks:0,
				questionNum:1,
				questionId:0,
				content:'',
				isCorrect:[],
				answer:'',
				qtype:'',
				opt1:'',
				opt2:'',
				opt3:'',
				opt4:'',
				selectedIndex:[],
				cnt:0,
				sc:0,
				sumSocre:[],
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				
				analysis:'',
				ownAnswer:[]
			}
		},
		methods: {
			
			loa:function(){
				
				var that = this;
				console.log(this.questionNum);
				var data={
					quesid:this.questionNum
				};
				uni.request({
					url:"http://localhost:8888/question",
					data:data,
					success(res) {
						if(res.data.code==200){
							that.sc=res.data.data[0].score;
							that.questionId=res.data.data[0].questionId;
							that.content=res.data.data[0].content;
							that.answer=res.data.data[0].answer;
							that.qtype=res.data.data[0].questionType;
							that.analysis = res.data.data[0].analysis;
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
				
			},
			loa2:function(){
				var that = this;
				var data={
					quesid:this.questionNum
				};
				uni.request({
					url:"http://localhost:8888/option",
					data:data,
					success(res) {
						if(res.data.code==200){
							console.log(res.data.data[3].optText);
							that.opt1=res.data.data[0].optText;
							that.opt2=res.data.data[1].optText;
							that.opt3=res.data.data[2].optText;
							that.opt4=res.data.data[3].optText;
							that.isCorrect[0]=res.data.data[0].isCorrect;
							that.isCorrect[1]=res.data.data[1].isCorrect;
							that.isCorrect[2]=res.data.data[2].isCorrect;
							that.isCorrect[3]=res.data.data[3].isCorrect;
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			// 获取题目数量
			countNum:function(){
				var that = this;
				uni.request({
					url:"http://localhost:8888/qNumber",
					success(res) {
						if(res.data.code==200){
							that.cnt=res.data.data[0].cnt;
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			// 判断答案
			selectAnswer:function(e){
				this.clicks=1;
				if(this.clicks!=1){
					var i = e.target.dataset.index;
					this.selectedIndex[this.questionNum] = i;
					console.log(this.selectedIndex[this.questionNum]);
					this.$forceUpdate();
					if(e.target.dataset.ans==1){
						this.sumSocre[this.questionNum]=this.sc;
						console.log("正确");
					}else{
						this.sumSocre[this.questionNum]=0;
						console.log("错误")
					}
				}
				
				
				//选择的答案
				
				
			},
			
			yourAnswer:function(){
				if(this.selectedIndex[this.questionNum] == 1){
					this.ownAnswer[this.questionNum] = 'A';
				}
				else if(this.selectedIndex[this.questionNum] == 2){
					this.ownAnswer[this.questionNum] = 'B';
				}
				else if(this.selectedIndex[this.questionNum] == 3){
					this.ownAnswer[this.questionNum] = 'C';
				}
				else if(this.selectedIndex[this.questionNum] == 4){
					this.ownAnswer[this.questionNum] = 'D';
				}
				else{
					this.ownAnswer[this.questionNum] = '--';
				}
			},
			
			
			// 上一页
			prevPg:function(e){	
				if(e.target.dataset.curpg>1){
					console.log(this.questionNum);
					console.log("上一页");
					
					this.questionNum-=1;
					this.yourAnswer();
					this.loa();
					this.loa2();
					
				}else{
					console.log("已是第一题")
				}
			},
			// 下一页
			nextPg:function(e){
			// 跳转选题
				console.log(e);
				if(e.target.dataset.curpg<this.cnt){
					console.log(this.questionNum);
					console.log("下一页");
					
					this.questionNum+=1;
					this.yourAnswer();
					this.loa();
					this.loa2();
					
				}else{
					this.dialogToggle('warn');
					console.log(this.questionNum);
					console.log("已是最后一题")
				}
			},
			goMenu:function(){
				
				uni.navigateTo({
					url:'/pages/viewSelect/viewSelect?selection=' + encodeURIComponent(JSON.stringify(this.selectedIndex))
				});
			},
			collect() {
				
			}
		},
		
		//对应选项展示
		onShow(options) {
			console.log(uni.getStorageSync('qid'));
			this.questionNum=uni.getStorageSync('qid');
			this.yourAnswer();
			this.loa();
			this.loa2();
			
		},
		mounted() {
			this.isRight=uni.getStorageSync('isRight');
			console.log(uni.getStorageSync('selection'));
			this.selectedIndex=uni.getStorageSync('selection');
			this.yourAnswer();
			this.countNum();
			this.loa();
			this.loa2();
		}
	}
</script>

<style>
	body {
		background-color:#F0EEEF;
	}
	
	.content{
		display: flex;
		flex-direction: column;
		
	}
	.tab{
		border:2rpx solid whitesmoke;
		background-color: #F0EEEF;
		border-radius: 40px;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10px;
	}
	.tab>view{
		height: 50rpx;
		padding: 10px;
	}
	
	.tab>view>image{
		height: 30px;
		width: 30px;
	}
	.box{
		display: flex;
		flex-direction: column;
		border:2rpx solid whitesmoke;
		background-color: #F0EEEF;
		border-radius: 40px;
		padding-top: 10px;
		padding-left: 10px;
	}
	.que{
		font-weight: bold;
	}
	.page{
		display: flex;
		justify-content: center;
	}
	.page>image{
		
		
		height: 50px;
		width: 50px;
		border-radius: 50px;
		padding: 25px;
	}
	.cur{
		color: red;
	}
	.no{
		color: darkgreen;
		font-weight: bold;
	}
	.type{
		color: darkgreen;
	}
	.opt{
		width: 200px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20px;
	}
	.opt>image{
		height: 45px;
		width: 45px;
		border-radius: 45px;
		
	}
	
	.answer {
		display: flex;
		justify-content: space-around;
		border:2rpx solid whitesmoke;
		border-radius: 30rpx;
		width: 700rpx;
		margin: 20rpx;
		padding-top: 20rpx;
	}
	.answer image {
		width: 40rpx;
		height: 40rpx;
	}
	.analysis >view:nth-child(2) {
		padding: 30rpx;
		
	}
	
</style>

